<template>
  <div class="wbdiv">
    <div class="divs1">设备信息</div>
    <div class="divs2">
      <div class="dinfo1 br">项目号：{{ projectid }}</div>
      <div class="dinfo2">设备号：{{ deviceid }}</div>
    </div>
    <div class="divs3">开锁密码</div>
    <div class="divs4">
      <span class="mmspan bl bt bb br">{{ m1 }}</span>
      <span class="mmspan bt bb br">{{ m2 }}</span>
      <span class="mmspan bt bb br">{{ m3 }}</span>
      <span class="mmspan bt bb br">{{ m4 }}</span>
      <span class="mmspan bt bb br">{{ m5 }}</span>
      <span class="mmspan bt bb br">{{ m6 }}</span>
    </div>
    <div class="divs5">
      <span class="hqmm" v-if=" second === 0 ">设备获取密码中</span>
      <span v-else ><span>下次更新时间</span><span>{{ second }}</span><span>秒后</span></span>
    </div>
    <div class="divs6">更多操作</div>
    <div class="divs7">
      <div class="dinfo3 br" @click="jiebind()">
        <div class="imgcls">
          <img class="imgwh"  src="http://qiniuyun.bblog.site/jieban.png"/>
        </div>
        <div class="ssd">解绑设备</div>
      </div>
      <div class="dinfo4"  @click="yuanc()">
        <div class="imgcls">
          <img class="imgwh" src="http://qiniuyun.bblog.site/dianji.png"/>
        </div>
        <div class="ssd">远程开锁</div>
      </div>
    </div>

  </div>
</template>
<script>
import { requestPost } from '@/utils/index'
export default {
  data () {
    return {
      id: '',
      projectid: '',
      deviceid: '',
      openid: wx.getStorageSync('openid'),
      m1: '-',
      m2: '-',
      m3: '-',
      m4: '-',
      m5: '-',
      m6: '-',
      second: 0,
      jtq: '',
      aq: 0
    }
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: '门锁操作'
    })
    this.id = options.id
    this.projectid = options.projectid
    this.deviceid = options.deviceid
  },
  onReady () {
    var that = this
    if (this.jtq) {
      return
    }
    this.jtq = setInterval(function () {
      if (that.second === 0) {
        if (that.aq === 0) {
          that.getDeviceInfo()
          that.aq = 1
        }
      } else if (that.second > 0) {
        that.second = that.second - 1
      } else {
        that.second = 0
        that.aq = 0
      }
    }, 1000)
  },
  methods: {
    getDeviceInfo () {
      var that = this
      var data = {
        'obj': {'openid': this.openid, 'projectid': this.projectid, 'deviceid': this.deviceid}
      }
      var url = wx.getStorageSync('xcxrequestUrl') + '/xcx/devices/getLastkey'
      requestPost(url, data, 'POST').then(function (value) {
        if (value.error_code === 0) {
          that.m1 = value.data.pwd.charAt(0)
          that.m2 = value.data.pwd.charAt(1)
          that.m3 = value.data.pwd.charAt(2)
          that.m4 = value.data.pwd.charAt(3)
          that.m5 = value.data.pwd.charAt(4)
          that.m6 = value.data.pwd.charAt(5)
          that.second = value.data.second
          that.aq = 0
        }
      }, function (value) {
      })
    },
    yuanc () {
      var data = {
        'obj': {'openid': this.openid, 'projectid': this.projectid, 'deviceid': this.deviceid}
      }
      var url = wx.getStorageSync('xcxrequestUrl') + '/xcx/devices/excute_unlock'
      wx.showLoading({
        title: '远程开锁中....',
        mask: true
      })
      requestPost(url, data, 'POST').then(function (value) {
        if (value.error_code === 0) {
          wx.showLoading({
            title: '远程开锁成功',
            mask: true
          })
          setTimeout(function () {
            wx.hideLoading()
          }, 1500)
        } else {
          wx.hideLoading()
        }
      }, function (value) {
        wx.hideLoading()
      })
    },
    jiebind () {
      var data = {
        'obj': {'openid': this.openid, 'projectid': this.projectid, 'deviceid': this.deviceid}
      }
      var url = wx.getStorageSync('xcxrequestUrl') + '/xcx/harduser/unbindDevice'
      wx.showModal({
        title: '提示',
        content: '是否确认解绑设备？',
        success: function (res) {
          if (res.confirm) {
            wx.showLoading({
              title: '设备解绑中...',
              mask: true
            })
            requestPost(url, data, 'POST').then(function (value) {
              if (value.error_code === 0) {
                wx.showLoading({
                  title: '设备解绑成功',
                  mask: true
                })
                setTimeout(function () {
                  wx.hideLoading()
                  wx.navigateBack({
                    delta: 1
                  })
                }, 1000)
              }
            }, function (value) {
            })
          } else if (res.cancel) {
            console.log('cancel')
          }
        }
      })
    }
  }
}
</script>
<style scoped>
.wbdiv{
  position: fixed;
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction:column;
  /* align-items:center;/*垂直居中*/
  /* justify-content: center;水平居中  */
  background-color: rgba(228, 228, 228, 0.171);
}
.divs1{
  width: 100%;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: rgb(129, 129, 129);

}
.divs2{
  width: 100%;
  float: left;
}
.divs3{
  width: 100%;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: rgb(129, 129, 129);
}
.divs4{
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 80px;
  line-height: 80px;
  float: left;
  text-align: center;
}
.divs5{
  color: rgb(0, 0, 0);
  width: 100%;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
  background-color: rgb(50, 255, 187);
}
.divs6{
  width: 100%;
  float: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: rgb(129, 129, 129);
}
.divs7{
  width: 100%;
  float: left;
}

.dinfo1{
  height: 50px;
  background-color: rgb(255, 255, 255);
  width: 49%;
  text-align: center;
  line-height: 50px;
  float: left;
}
.dinfo2{
  height: 50px;
  background-color: rgb(255, 255, 255);
  width: 50%;
  text-align: center;
  line-height: 50px;
  float: right;
}
.dinfo3{
  background-color: rgb(255, 255, 255);
  padding-top: 10px;
  padding-bottom: 10px;
  width: 49%;
  float: left;
}
.dinfo4{
  background-color: rgb(255, 255, 255);
  padding-top: 10px;
  padding-bottom: 10px;
  width: 50%;
  float: left;
}
.dinfo{
  background-color: rgb(255, 255, 255);
  width: 50%;
  text-align: center;
  float: left;
}
.ksdiv{
  height: 60px;
  width: 100%;
  text-align: center;
}
.imgcls{
  width: 100%;
  float: left;
  text-align: center;
  /* border: 1px solid red; */
}
.ssd{
  width: 100%;
  height: 30px;
  text-align: center;
  display: block;
  float: left;
}
.mmspan{
  border: 1px solid rgb(255, 255, 255);
  font-size: 35px;

  color: rgb(0, 255, 170);
  padding-left: 15px;
  padding-right: 15px;
  /* margin-right: 10px; */
  font-weight: bold;
}
.hqmm{
  color: black;
  width: 100%;
  line-height: 30px;
  text-align: center;
}
.imgwh{
  width: 50px;
  height: 50px;
}
.bl{
  border-left: 1px solid rgb(228, 228, 228);
}
.bt{
  border-top: 1px solid rgb(228, 228, 228);
}
.br{
  border-right: 1px solid rgb(228, 228, 228);
}
.bb{
  border-bottom: 1px solid rgb(228, 228, 228);
}

</style>
